<template>
  <div>
    <el-table
      :data="lists"
      style="width: 100%;"
    >
      <el-table-column
        label="文章标题"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <img slot="content" :src="baseUrl + scope.row.thums" style="width:100px">
            <a style="margin-left: 10px" @click.prevent="link(scope.row._id)">{{ scope.row.title }}</a>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="类别"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.blogType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="文章描述"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.descrition }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="点击数量"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.clickSum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ dayTime(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近更改时间" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ dayTime(scope.row.updatedAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="up(scope.row)" />
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row._id,scope.row.blogType,scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :page-size="pageSize"
      :current-page="currt"
      @current-change="change"
    />
  </div>
</template>

<script>
import { Time } from '@/utils/useDate'
import { get_requset, Post_requset } from '@/api/publicRequest'
import { apiAList, baseUrl, apiDelBlog } from '@/routerConfig'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      lists: [],
      count: 0,
      currt: 1,
      pageSize: 10,
      baseUrl
    }
  },
  async created() {
    await this.getBlogList()
  },
  methods: {
    dayTime(date) {
      return Time(date)
    },
    up(row) {
      this.$router.push({
        name: 'addBlog',
        query: row
      })
    },
    async del(_id, blogType, index) {
      const { data } = await Post_requset(apiDelBlog, { _id, blogType })
      if (typeof data === 'string') {
        Message.error(data)
        return
      } else {
        if (this.count - 1 > 10) {
          if ((this.count - 1) % 10 === 0) this.currt--
          await this.getBlogList()
        } else {
          this.lists.splice(index, 1)
        }
      }
      Message.success('删除成功')
    },
    async getBlogList() {
      const { data } = await get_requset(apiAList + '/全部', { limit: this.pageSize, skip: this.currt })
      this.count = data.count
      this.lists = []
      this.lists.push(...data.result)
    },
    async change(e) {
      this.currt = e
      await this.getBlogList()
    },
    link(_id) {
      window.open(`${this.baseUrl}/article/${_id}`)
    }
  }

}
</script>

<style>

</style>
